<template>
  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="发布课程"/>
    </el-steps>

    <!-- 添加添加章节弹出框 ， -->
    <el-button type="text" @click="dialogChapterFormVisibleClick()">添加章节</el-button>

    <!-- 章节弹框 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
        <el-form :model="chapter" label-width="120px">
            <el-form-item label="章节标题">
                <el-input v-model="chapter.title"/>
            </el-form-item>
            <el-form-item label="章节排序">
                <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 小结弹框 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加小结课时">
        <el-form :model="videoInfo" label-width="120px">
            <el-form-item label="课时标题">
                <el-input v-model="videoInfo.title"/>
            </el-form-item>
            <el-form-item label="课时排序">
                <el-input-number v-model="videoInfo.sort" :min="0" controls-position="right"/>
            </el-form-item>

            <el-form-item label="是否免费">
                <el-radio-group v-model="videoInfo.isFree">
                    <el-radio :label="true">免费</el-radio>
                    <el-radio :label="false">收费</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="上传视频">
                <el-upload
                    :on-success="handleVodUploadSuccess"
                    :on-remove="handleVodRemove"
                    :before-remove="beforeVodRemove"
                    :on-exceed="handleUploadExceed"
                    :file-list="fileList"
                    :action="BASE_API+'/eduvod/video/upload/aliyun/video'"
                    :limit="1"
                    class="upload-demo">
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                    <div slot="content">最大支持1G，<br>
                        支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                        GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                        MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                        SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                    <i class="el-icon-question"/>
                </el-tooltip>
                </el-upload>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
            <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 显示章节、小结 信息 TODO -->
    <ul class="chanpterList">
        <li
            v-for="chapter in chapterList"
            :key="chapter.id">
            <p>
                {{ chapter.title }}
                <span class="acts">
                    <el-button type="text" @click="openAddVideo(chapter.id)">添加小结</el-button>
                    <el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
                    <el-button type="text" @click="removeChaptet(chapter.id)" >删除</el-button>
                </span>
            </p>
            <!-- 小结视频 -->
            <ul class="chanpterList videoList">
                <li
                    v-for="video in chapter.videoVOList"
                    :key="video.id">
                    <p>{{ video.title }}
                        <!-- --><span class="acts">
                            <el-button type="text" @click="openEditVideo(video.id)">编辑</el-button>
                            <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                        </span> 
                    </p>
                </li>
            </ul>
            
        </li>
</ul>
  
    <div>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
    </div>

  </div>
</template>
<script>
    import chapter from '@/api/edu/chapter';
    import videoApi from '@/api/edu/video';

    export default {
        
        data(){
            return {
                saveBtnDisabled:false,
                chapterList:[], // 章节、小结数组
                courseId :'', // 保存 路由中课程id的值 即为 :id
                dialogChapterFormVisible:false, //设置章节 弹框 不弹出。
                dialogVideoFormVisible:false, // 设置 小结弹框 不弹出
                saveVideoBtnDisabled:false, // 设置保存按钮禁用

                chapter:{ // 封装 页面提交的章节信息
                    sort:0,
                    title:'',
                },

                videoInfo:{ // 封装页面提交的 小节信息
                    title: '',
                    sort: 0,
                    isFree: true,  // 默认1 小结视频免费,对应数据表 isFree 字段 :1 true，0 false
                    videoSourceId: '', // 视频保存的url 
                    videoOriginalName:'' // 视频原始名称
                },
                // 视频上传相关属性设置
                fileList: [],//上传文件列表
                BASE_API: process.env.BASE_API // 接口API地址
            }
        },
        created(){
            // 获取路由中的 id值
            if(this.$route.params && this.$route.params.id){
                this.courseId=this.$route.params.id;
            }
            // 再页面加载之前 调用
            this.initChapterVideo();
        },
        methods:{
// **********************************小结操作部分***************************************************************
        // 添加事件 小结弹框,传入 章节id
        openAddVideo(chapterId){
            //清空之前的输入项
            this.videoInfo = {};

            // 弹出添加小结 弹框
            this.dialogVideoFormVisible=true;

            // 设置 videoInfo的 章节id 
            this.videoInfo.chapterId = chapterId; // 当前点击的章节id
            // 设置  vidoeInfo 的课程id
            this.videoInfo.courseId= this.courseId; // 当前课程id

             console.log(this.videoInfo);
        },

        // 添加、修改
        saveOrUpdateVideo(){
            //console.log(this.videoInfo);

            // 根据 videoInfo的id值判断是添加、还是修改操作
            console.log(this.videoInfo.id);
           
            if(this.videoInfo.id){
                console.log('ssssssssssssssss')
                // 修改
                this.editVideoInfo();
            }else{
                // 添加
                this.saveVideoInfo();
            }
        },
        
        // 添加 小结
        saveVideoInfo(){
            // 清空上次记录
            this.fileList = [];

            //清空表单数据
            
            // 添加
            videoApi.addVideoInfo(this.videoInfo)
                .then(response =>{
                // 关闭添加小结 弹框
                this.dialogVideoFormVisible=false;

                // 提示添加成功
                this.$message({
                    type:'success',
                    message:'添加小结信息成功'
                });
                    // 刷新页面
                this.initChapterVideo();
            });
        },
        // 修改小结
        editVideoInfo(){
            videoApi.editVideoInfo(this.videoInfo)
                .then(response =>{
                        
                    // 提示添加成功
                    this.$message({
                        type:'success',
                        message:'修改小结信息成功'
                    });
                     // 关闭添加小结 弹框
                    this.dialogVideoFormVisible=false;
                        // 刷新页面
                    this.initChapterVideo();
                });
        },

        // 删除 小结
        removeVideo(videoId){
            
            this.$confirm('此操作将永久删除该小结信息, 是否继续?', '提示', {
              confirmButtonText: '确定', // then
              cancelButtonText: '取消', // catch
              type: 'warning'
             })
            .then(() => {
                videoApi.removeVideo(videoId)
                    .then(response =>{
                        // 提示添加成功
                        this.$message({
                            type:'success',
                            message:'删除小结信息成功'
                        });
                        // 刷新页面
                        this.initChapterVideo();   
                    });
                })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        
        },

        // 修改小结弹框回显数据
        openEditVideo(videoId){
            // 根据 videoId 查询 小结并回显表单
            videoApi.getVideoInfo(videoId)
                .then(resonse =>{
                    // 进行赋值  回显
                    this.videoInfo = resonse.data.videoInfo;
                    console.log(this.videoInfo);

                    //处理 free
                    this.videoInfo.isFree=this.videoInfo.isFree

                    // 打开添加小结弹框，回显信息
                    this.dialogVideoFormVisible=true;
                });
        },
        // 上传视频之前 回调
        handleUploadExceed(){
            this.$message.warning('想要重新上传视频，请先删除该小结下已上传的视频！');
        },

        // 上传视频 成功 回调
        handleVodUploadSuccess(response, file, fileList){
                this.$message({
                    type:'success',
                    message:'上传小结视频成功'
                });
                // 将接口返回的id 赋值给当前 videoSourseId 
                this.videoInfo.videoSourceId =  response.data.videoId;
                // 将上传文件名称 赋值给当前  this.videoInfo.videoOriginalName.
                this.videoInfo.videoOriginalName = file.name;
                
        },
        // 点击确定，删除视频的回调
        handleVodRemove(){
            // 点击确定删除后 调用api 删除 小结、小结管理的视频信息
            videoApi.removeVideoAliyun(this.videoInfo.videoSourceId)
                .then(response =>{
                        this.$message({
                            type:'success',
                            message:'删除小结视频成功'
                        });
                        // 把上传的文件列表置空
                        this.fileList = [];
                        // 删除视频后 ,将当前videoInfo 保存的视频id、视频名称、置空
                        this.videoInfo.videoSourceId='';
                        this.videoInfo.videoOriginalName='';
                });
        },
        // 点击 X按钮， 删除之前回调
        beforeVodRemove(file,fileList){
            // 提示是否删除？
            return this.$confirm(`确定删除 ${file.name} 吗?`);
        },
        
// **********************************章节操作部分***************************************************************
            next(){
                // 调换到第三步,通过路由，携带 课程id
                this.$router.push({path:'/course/publish/'+this.courseId});
            },

            // 返回上一步
            previous(){
                this.$router.push({path:'/course/info/'+this.courseId});
            },

            // 初始化当前课程对应的 章节、小结列表
            initChapterVideo(){
                chapter.getChapterVideoByCourseId(this.courseId)
                  .then(response =>{
                      // 赋值给当前 chapterList
                      this.chapterList = response.data.chaperVideoList;
                  });
            },

            // 根据 操作 判断是 添加还是 修改章节
            saveOrUpdate(){
                // 判断当前操作是 添加还是 修改章节
                // 根据 id 判断

                if(this.chapter.id){
                    //alert(this.chapter.id);
                    this.editChapter();
                }else{
                   // alert(this.chapter.id);
                     this.addChapter();
                }
            },

            // 修改章节信息
            editChapter(){
               // 赋值课程id 给章节
               this.chapter.courseId = this.courseId;

               chapter.editChapter(this.chapter)
                    .then(response =>{
                           // 关闭 弹框
                        this.dialogChapterFormVisible=false;
                        // 提示信息
                            this.$message({
                            type:'success',
                            message:'修改章节信息成功'
                        });
                        // 刷新页面
                        this.initChapterVideo();  
                    });
            },

            // 添加章节
            addChapter(){
                 // 赋值课程id 给章节
                this.chapter.courseId = this.courseId;

                chapter.addChapter(this.chapter)
                    .then(response =>{
                        // 关闭 弹框
                        this.dialogChapterFormVisible=false;
                        // 提示信息
                            this.$message({
                            type:'success',
                            message:'添加章节信息成功'
                        });
                        // 刷新页面
                        this.initChapterVideo();
                });
            },

            // 设置 点击弹出框，并清空上次表单数据
            dialogChapterFormVisibleClick(){
                    // 显示 弹框
                    this.dialogChapterFormVisible=true;
                    // 清空
                    this.chapter.title = '';
                    this.chapter.sort =0;
            },

            // 打开编辑章节弹框，回显章节信息
            openEditChapter(id){
                // 先查询要编辑的章节
                chapter.getChapterById(id)
                    .then(response =>{
                        // 将查询的赋值给 当前chapter
                        this.chapter = response.data.chapter;
                        // 打开 弹框回显
                        this.dialogChapterFormVisible =true;
                    });
            },

            // 删除章节信息
            removeChaptet(id){

              this.$confirm('此操作将永久删除该章节信息, 是否继续?', '提示', {
              confirmButtonText: '确定', // then
              cancelButtonText: '取消', // catch
              type: 'warning'
             })
            .then(() => {
                chapter.removeChapterById(id)
                    .then(response =>{
                            // 提示信息
                            this.$message({
                            type:'success',
                            message:'删除章节信息成功'
                        });
                        // 刷新页面
                        this.initChapterVideo();
                    }); 
                })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
            }
        }
    }
</script>

<style scoped>
.chanpterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chanpterList li{
  position: relative;
}
.chanpterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chanpterList .acts {
    float: right;
    font-size: 14px;
}

.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
</style>